<script setup>
/**
 * @name 图文发布记录--组件
 */
import {ref, reactive, computed, onMounted, inject} from 'vue'
import request from "@/common/utils/request";
import {
  DownOutlined,
  QrcodeOutlined,
  SearchOutlined,
  UpOutlined,
  ExclamationCircleOutlined,
  EyeOutlined,
  EllipsisOutlined,
  CloudSyncOutlined,
} from "@ant-design/icons-vue";

const { convertTimeToTimezone, currentTimezone } = inject('timezone')

// 详情抽屉
import IssueDetail from '@/views/shotstack/MatrixMarketing/modules/IssueDetail.vue'
const IssueDetailRef = ref()
import { message } from 'ant-design-vue';

let columns = [
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
          width:80
        },
        {
          title: "任务名称",
          dataIndex: "title",
          key: "title",
          ellipsis: true,
        },
        // {
        //   title: "文章标题",
        //   dataIndex: "articleTitle",
        //   key: "articleTitle",
        //   ellipsis: true,

        // },
        {
          title: "发布平台/发布账号",
          dataIndex: "publishPlatform",
          key: "publishPlatform",
        },

        {
          title: "发布状态",
          dataIndex: "publishStatus",
          key: "publishStatus",
        //   width:160
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
          key: "created_at",
        //   width:200
        },
        {
          title: "数据量",
          dataIndex: "read_count",
          key: "read_count",
        //   width:200
        },

        {
          title: "操作",
          dataIndex: "action",
          key: "action",
        //   width:100
        }
]

let statusOptions = [
      {
          label:'全部',
          value:-1
        },
        {
          label:'未发布',
          value:0
        },
        {
          label:'发布中',
          value:1
        },
        {
          label:'发布成功',
          value:2
        },
        {
          label:'发布失败',
          value:3
        },
    ]

const state = reactive({
    // 列表数据
    dataSource:[],
    loading: false,
    times:[]
})

const formState = reactive({
    total: 0,
    page: 1,
    pageSize: 10,
    start_date: '',
    end_date: '',
    // 任务状态
    status: -1,
    // 任务名称
    publish_task_name: '',
    date_field: 'fix_at',
})

const pagination = computed(() => ({
    total: formState.total,
    current: formState.page,
    pageSize: formState.pageSize,
    showSizeChanger: true,
    showQuickJumper: true,
}));

const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getIssueList();
};

const onSearch = ()=>{
    formState.page = 1
    getIssueList()
}

defineExpose({
  onSearch
})


const reset = ()=>{
    Object.assign(formState, {
    total: 0,
    page: 1,
    pageSize: 10,
    start_date: '',
    end_date: '',
    // 任务状态
    status: -1,
    // 任务名称
    publish_task_name: '',
    date_field: 'fix_at',
    })
    state.times= []
    getIssueList()
}

// 获得发布记录 列表
const getIssueList = async () => {
    state.loading = true
    formState.start_date = state.times?.[0] ?? ''
    formState.end_date = state.times?.[1] ?? ''    
    const params = {
        ...formState,
    }
    try {
        const res = await request.get("/work_ai", "/user/socialMedia/publishTask/log/list", params);        
        console.log(res, '图文发布记录列表??');
        
        state.dataSource = res?.list??[]
        formState.total = res?.total ?? 0
    } finally {
        state.loading = false
    }
}

const getTitle = (record)=>{
    let title =  record?.publish_task_article_relation?.publish_task?.title??'--'
    let remark =  record?.publish_task_article_relation?.publish_task?.remark??'--'
    return remark?remark:title
}

// 查看详情
const IssueDetailVisible = ref(false)
let current_task_id = ref('')
let currentTask = ref({
       article_id:0,
        publish_task:{
            title:'',
            remark:''
        }
})
const showDetail = (record)=>{
        current_task_id.value = record?.publish_task_article_relation?.publish_task_id??''
        if(!current_task_id.value){
          return message.warning('无关联图文信息')
        }
        currentTask.value.publish_task.title = record?.publish_task_article_relation?.publish_task?.title??''
        currentTask.value.publish_task.remark = record?.publish_task_article_relation?.publish_task?.remark??''
        currentTask.value.article_id = record?.article_id??0
        IssueDetailVisible.value = true
    }

onMounted(() => {
    getIssueList()
})
</script>

<template>
    <div class="GraphicTextIssueRecord">

    <!-- 头部搜索条件 -->
    <div class="flex-1">
        <a-input v-model:value="formState.publish_task_name" placeholder="请输入任务名称" style="width: 200px;"></a-input>
        <a-select v-model:value="formState.status" :options="statusOptions" placeholder="请选择任务状态" style="width: 200px;margin:0 5px;"></a-select>
        <a-range-picker v-model:value="state.times" valueFormat="YYYY-MM-DD"/>
        <a-button type="primary" style="margin: 0 5px;" @click="onSearch">查询</a-button>
        <a-button @click="reset">重置</a-button>
    </div>

    <a-table
        :dataSource="state.dataSource"
        :columns="columns"
        :pagination="pagination"
        @change="handleTableChange"
        :loading="state.loading"
        :scroll="{ x: 1500 }"
      >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'title'">{{ getTitle(record) }}</template>
        <template v-if="column.key === 'articleTitle'">{{ record?.platform_account_article?.title }}</template>
        <template v-if="column.key === 'publishPlatform'">
          <a-tooltip>
            <template #title>
              {{record?.platform_account_user.platform.value}}
            </template>

            <img :src="record?.platform_account_user.platform.image"  class="image-icon">
            {{ record?.platform_account_user.nickname }}
          </a-tooltip>
        </template>
         <template v-if="column.key === 'publishStatus'">{{ record?.status_txt }}</template>
        <template v-if="column.key === 'read_count'">
          <p>
            <span>阅读量：</span>
            <span>{{ record?.read_count??0 }}</span>
          </p>
          <p>
            <span>点赞数：</span>
            <span>{{ record?.like_count??0 }}</span>
          </p>
          <p>
            <span>评论数：</span>
            <span>{{ record?.comment_count??0 }}</span>
          </p>
          <p>
            <span>收藏数：</span>
            <span>{{ record?.collect_count??0 }}</span>
          </p>
        </template>
        <template v-if="column.key === 'created_at'">{{ convertTimeToTimezone(record.created_at,record?.publish_task_article_relation?.publish_task?.utc_offset??8)}}</template>
        <template v-if="column.key === 'action'">
            <a-button type="link" @click="showDetail(record)">详情</a-button>
        </template>
      </template>
      </a-table>
    </div>

    <!-- 查看发布详情抽屉 -->
    <IssueDetail ref="IssueDetailRef" 
    v-model:visible="IssueDetailVisible" 
    :currentTask="currentTask"  
    :current_task_id="current_task_id" 
    @updateList="onSearch"
    ></IssueDetail>
</template>

<style lang="less" scoped>
     .image-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #cccccc47;
    margin:5px;
    padding: 5px;
    cursor: pointer;
   }
   .flex-end{
    justify-content: flex-end;
   }
</style>